<template>
  <div>
    <!-- <titleHead :title="title" /> -->
    <div id="center">
      <el-col>
        <el-col :span="12">
          <el-col
            v-for="item in 3"
            :key="item"
            class="item bg-color-black"
            :span="24"
            style="height: 16rem"
          >
            <title2 :title="title2s[item - 1]" />
         
            <text1 :cockpitData="dataArray[item-1]" />
          </el-col>
        </el-col>
        <el-col :span="12">
          <el-col
            v-for="item in 3"
            :key="item"
            class="item bg-color-black"
            :span="24"
          >
         
            <lineAndBar :height="'16rem'"  :params="barParamsArray[item-1]" :colorArr="colorArr[item-1]" />
          </el-col>
        </el-col>
      </el-col>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "事项优化",
      title2s: ["云服务器", "物理服务器", "租户"],
      cockpitData: {
        imgUrl: "./text.png",
        num: "78",
        dw: "个",
        title: "重大开工项目",
      },
      dataArray:[],
      barParamsArray:["8-1-4-1","8-1-4-2","8-1-4-3"],
      colorArr:[["#7CCF72","#38A230","#38A230"],["#637FEA","#2B3B9D","#2B3B9D"],["#FFB37B","#EE8041","#EE8041"]]
    };
  },
  mounted(){
    this.getInfor()
  },
  methods:{
  getInfor(){
    this.getInfo({key:"8-1-1"}).then(res=>{
   
      const data=res.cockpitData[0];
      data.imgUrl="./text.png";
     
      this.dataArray.push(data)
    })
    this.getInfo({key:"8-1-2"}).then(res=>{
      
      const data=res.cockpitData[0];
      data.imgUrl="./text.png";
     
      this.dataArray.push(data)
    })
    this.getInfo({key:"8-1-3"}).then(res=>{
     
      const data=res.cockpitData[0];
      data.imgUrl="./text.png";
     
      this.dataArray.push(data)
    })
    //---资源分配--//
  
    // this.getInfo({key:"8-1-3"})
    //  this.getInfo({key:"8-2-1"})
    //  this.getInfo({key:"8-2-2"})
   }
  }

};
</script>

<style lang="scss" scoped>
#center {
  display: flex;
  .up {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      border-radius: 6px;
      padding-top: 8px;
      margin-top: 8px;
      width: 32%;
      height: 70px;
      .dv-dig-flop {
        width: 150px;
        height: 30px;
      }
    }
  }
  .down {
    padding: 6px 4px;
    padding-bottom: 0;
    width: 100%;
    display: flex;

    justify-content: space-between;
    .bg-color-black {
      border-radius: 5px;
    }
    .ranking {
      padding: 10px;
      width: 59%;
      .dv-scr-rank-board {
        height: 225px;
      }
    }
    .percent {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .item {
        // width: 50%;
        height: 120px;
        span {
          margin-top: 8px;
          font-size: 14px;
          display: flex;
          justify-content: center;
        }
      }
      .water {
        width: 100%;
        .dv-wa-le-po {
          height: 120px;
        }
      }
    }
  }
}
</style>
